<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<html>
<head>
<title></title>
<script type="text/javascript" src="../../resources/js/jquery-1.6.js"></script>
<script type="text/javascript" src="../../resources/js/jquery.form.js"></script>
<script type="text/javascript" src="../../resources/js/jquery-validation-1.8.0/jquery.validate.js"></script>
<script type="text/javascript" src="../../resources/js/jquery-validation-1.8.0/additional-methods.js"></script>
<script type="text/javascript" src="../../resources/js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="../../resources/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="../../resources/js/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="../../resources/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet" href="../../resources/js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen"/>
<link rel="stylesheet" type="text/css" media="screen" href="../../resources/css/start/jquery-ui-1.8.10.custom.css"/>
<style type="text/css">
    * {
        font-family: Verdana;
        font-size: 96%;
    }

    label {
        width: 10em;
        float: left;
    }

    label.error {
        float: none;
        color: red;
        padding-left: .5em;
        vertical-align: top;
    }

    #informationTable, legend {
        font-size: 1.5em;
    }

    fieldset {
        padding: 0px 0px;
        margin: 0px 0px;
        border-color: transparent;
        /*border-width: 5;*/
        /*border-color: #009900;*/
        width: 800px;
        font: 8px Arial;
    }

        /* .ui-tabs-nav .ui-tabs-selected a span {
            color: white;
            font-weight: bold;
            padding: 0;
            height: 27px;
            background-position: 0 -23px;
            line-height: 27px;
        }*/

    p {
        clear: both;
    }

    .submit {
        margin-left: 12em;
    }

    em {
        font-weight: bold;
        padding-right: 1em;
        vertical-align: top;
    }

    .ui-tabs {
        font-size: 0.8em;
    }
</style>

<style>
        /*  #sortable {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #sortable li {
            margin: 3px 3px 3px 0;
            padding: 1px;
            float: left;
            width: 100px;
            height: 90px;
            font-size: 4em;
            text-align: center;
        }

        #feedback {
            font-size: 1.4em;
        }

        #selectable .ui-selecting {
            background: #FECA40;
        }

        #selectable .ui-selected {
            background: #F39814;
            color: white;
        }

        #selectable {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #selectable li {
            margin: 3px;
            padding: 1px;
            float: left;
            width: 100px;
            height: 80px;
            font-size: 4em;
            text-align: center;
        }*/
</style>
<script type="text/javascript">
    $(document).ready(function() {
        $("#ed").fancybox({
                    'width'             : '75%',
                    'height'            : '90%',
                    'autoScale'         : false,
                    'transitionIn'      : 'none',
                    'transitionOut'     : 'none',
                    'type'              : 'iframe'
                });

        $.getJSON('/get/likes', {idUser: "${worker.idUser}" ,amount:6}, function(data) {


            $.each(data, function(key, value) {
                if (key < 3) {
                    $('#listOfLikes').append('<li class="ui-state-default" style="list-style-type: none;">' + '<a href = "/users/' + value.id + '">' + value.firstName + ' ' + value.lastName + '</a></li>');
                    $("#listOfLikes").sortable();
                    $("#listOfLikes").disableSelection();
                }
                //$(".ui-state-default").button();
            })
        })

        $.getJSON('/calendar/getNearestWorkerWorks', {amount:6}, function(data) {

            $.each(data, function(key, value) {
                $('#nearestWorks').append("<li class=\"ui-state-default\"><a href=\"workPage?idWork=" + value.idWork + "\">"
                        + "<b>Тип работы</b> : " + value.jobType.title + " "
                        + "<b>Что делать</b> : " + value.about + " "
                        + "<b>Даты</b> : " + retrieveSchedule(value.schedule)
                        + "</a></li>");
                $("#nearestWorks").sortable();
                $("#nearestWorks").disableSelection();
                // $(".ui-state-default").button();
            })
        })

        $.getJSON('/calendar/getRandomWorks', {amount:6}, function(data) {

            $.each(data, function(key, value) {
                $('#randomWorks').append("<li class=\"ui-state-default\"><a href=\"workPage?idWork=" + value.idWork + "\">"
                        + "<b>Тип работы</b> : " + value.jobType.title + " "
                        + "<b>Что делать</b> : " + value.about + " "
                        + "<b>Даты</b> : " + retrieveSchedule(value.schedule)
                        + "</a></li>");
                $("#randomWorks").sortable();
                $("#randomWorks").disableSelection();
                // $(".ui-state-default").button();
            })
        })

        $("#weekdaysTabs").tabs();


        $("#sendMessageHref").fancybox({
                    'width'             : '50%',
                    'height'            : '50%',
                    'autoScale'         : false,
                    'transitionIn'      : 'none',
                    'transitionOut'     : 'none',
                    'type'              : 'iframe'
                });

        $("#goToLikesHref").fancybox({
                    'width'             : '50%',
                    'height'            : '90%',
                    'autoScale'         : true,
                    'transitionIn'      : 'none',
                    'transitionOut'     : 'none',
                    'type'              : 'iframe'
                });
    });

    function closeIframe(reload,location) {

        $.fancybox.close();
        if (reload) {
            if (location) {
                window.location = location;
            } else {
                window.location.reload();
            }
        }
    }

    function edit() {
        $("#ed").click();
    }

    function sendMessage() {
        $("#sendMessageHref").click();
    }

    function goToLikes() {
        $("#goToLikesHref").click();
    }

//    function closeIframe(reload) {
//        	if (reload) {window.location.reload();}
//        	$('#fancybox-wrap').hide('slow').remove();
//            $('#fancybox-overlay').hide('slow').remove();
//
//        }




    function addToLike() {
        $.getJSON('/like', {email: "${worker.email}" }, function(data) {
            alert(data.text);
        })
    }

    function retrieveSchedule(schedule) {
        var result = "[ ";
        var toSort = new Array(schedule.length);

        $.each(schedule, function(key, value) {
            toSort[key] = value.workDate;
        });

        toSort.sort();

        $.each(toSort, function(key, value) {
            //result = result + value.workDate + " " + value.startTime + " " + value.endTime + " ";
            result = result + value + ", ";
        });
        result = result.substring(0, result.lastIndexOf(","));
        //result[result.lastIndexOf(",")] = ' ';
        result = result + " ]";
        return result;
    }

</script>
</head>
<body>
<div class="profile_top_left">
    <div class="profile_top">
        <div class="profile_left">
            <div class="profile_centr">
                <div class="profile_right">
                    <div class="photo_frame">
                        <img src="/workers/${worker.idUser}/getImage"/>
                    </div>
                </div>
                <div class="profile_menu_bar">
                    <security:authentication property="name" var="username"/>
                    <c:if test="${username != worker.email }">
                        <div>
                            <a id="sendMessageHref" hidden="hidden"
                               href="<c:url value="/messages/create?receiver=${worker.email}"/>"></a>
                            <input type="button" value="Отправить сообщение" onclick="sendMessage()"/>

                        </div>
                        <div><input type="button" value="Заинтересовало         "
                                    id="addToLike"
                                    onclick="addToLike()"/>
                        </div>
                    </c:if>
                    <c:if test="${not empty worker.likes }">
                    <div style="text-align: center; margin-top: 5px;">
                        Пользователю ${worker.firstName} ${worker.lastName} интересны:
                        <ol id="listOfLikes">
                        </ol>

                    </div>
                    <div style="text-align: left;">
                        <a id="goToLikesHref" hidden="hidden" href="/users/${worker.idUser}/likes"> </a>
                        <input type="button" value="Посмотреть всех        "
                                                          id="goToLikes"
                                                          onclick="goToLikes()"/>
                    </div>
                    </c:if>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="about_top_left">
<div class="about_top">
<div class="about_top_right">
<div class="about_right">
<div class="about_bottom_right">
<div class="about_bottom">
<div class="about_left_bottom">
<div class="about_left">
<div class="about_centr">
<div class="up_down_frame_top">
    <div class="up_down_frame_centr">
        <div class="text_for_up_frame" style="text-align: center;"><h1>${worker.firstName} ${worker.lastName}</h1></div>
        <div class="up_down_frame_bottom">
        </div>
    </div>
</div>

<div class="down_frame_centr">
<div class="text_for_up_frame">

<fieldset class="fieldset">
<table id="informationTable">

    <tr>
        <td>Город</td>
        <td>${worker.city.ruName}</td>
    </tr>

    <tr>
        <td>Email</td>
        <td>${worker.email}</td>
    </tr>

    <tr>
        <td>Телефон</td>
        <td>${worker.phone}</td>
    </tr>

    <tr>
        <td>Дата рождения</td>
        <td>${worker.dateOfBirth}</td>
    </tr>

    <tr>
        <td>Sex</td>
        <c:if test="${worker.sex == 0}">
        <td>Ж</td>
        </c:if>
        <c:if test="${worker.sex == 1}">
        <td>М</td>
        </c:if>
    <tr>

    <tr>
        <td>Icq</td>
        <td>${worker.icq}</td>
    </tr>

    <tr>
        <td>Skype</td>
        <td>${worker.skype}</td>
    </tr>

    <tr>
        <td>О себе</td>
        <td>${worker.about}</td>
    </tr>

    <tr>
        <td>Предпочитаемые работы</td>
        <td>
            <c:forEach var="jobType" items="${worker.jobTypes}">
                ${jobType.title}
            </c:forEach>
        </td>
    </tr>
</table>

<security:authorize ifAllGranted="ROLE_WORKER">
    <security:authentication property="name" var="username"/>
    <c:if test="${username == worker.email }">
        <p>
            <a style="display: none;" id="ed" href="/workers/${worker.idUser}/edit"></a>
            <input id="editAbout" style="font:12px Arial" type="button" value="Редактировать" onclick="edit();">
        </p>
    </c:if>
</security:authorize>

</fieldset>

</div>
<div class="down_frame_bottom">
</div>
</div>


</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="same_frame_top_left">
    <div class="same_frame_top">
        <div class="same_frame_right">
            <div class="same_frame_bottom">
                <div class="same_frame_left">
                    <div class="same_frame_centr">
                        <div class="red_frame">
                            <div class="red_frame_cor">
                                <div class="red_frame_bottom">
                                    <div class="text_red_frame">Ближайшие работы</div>
                                </div>
                            </div>
                        </div>

                        <div class="up_down_orange_top">
                            <div class="up_down_orange_centr">
                                <div class="text_for_down_frame">
                                    <ul>
                                        <!--
                                              <li>1. Листовки</li>
                                              <li>2. Хреновки</li>
                                              <li>3. Педровки</li>
                                              <li>4. Листовки 100 грн в час</li></ul>
                                              -->
                                    </ul>
                                </div>
                                <div class="up_down_orange_bottom">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="same_frame_top_left_bot">
    <div class="same_frame_top">
        <div class="same_frame_right">
            <div class="same_frame_bottom">
                <div class="same_frame_left">
                    <div class="same_frame_centr_bot">
                        <div class="red_frame">
                            <div class="red_frame_cor">
                                <div class="red_frame_bottom">
                                    <div class="text_red_frame">Требуются такие работники</div>
                                </div>
                            </div>
                        </div>

                        <div class="up_down_frame_top"
                             style="left:16px; top:60px; background-repeat:repeat-x; min-width:848px">
                            <div class="up_down_frame_centr" style="min-width:848px">
                                <div class="text_for_down_frame">
                                    <ul>
                                        <!--<li>1.rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</li>
                                              <li>1. dddddddddddddddddddddddddddddddddddddddddddddd</li>
                                              <li>1. ppppppppppppppppppppppppppppppp</li>
                                              <li>1. oooooooooooooooooooooooooooooooooooooooo</li>--></ul>
                                </div>
                                <div class="up_down_frame_bottom" style="background-repeat:repeat-x; min-width:848px">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<%-- 

                    <div id="weekdaysTabs">
                        <ul>
                            <li><a href="#mondayTab">Monday</a></li>
                            <li><a href="#tuesdayTab">Tuesday</a></li>
                            <li><a href="#wednesdayTab">Wednesday</a></li>
                            <li><a href="#thursdayTab">Thursday</a></li>
                            <li><a href="#fridayTab">Friday</a></li>
                            <li><a href="#saturdayTab">Saturday</a></li>
                            <li><a href="#sundayTab">Sunday</a></li>
                        </ul>
                        <div id="mondayTab">
                            <p>
                                <c:choose>
                                	<c:when test="${monday !=null }">
                                		Start time:<input class="timeClass" type="text" value="${monday.startTime }" readonly="readonly"
                                                  name="startTime0"/>
                                		End time:<input class="timeClass" type="text" value="${monday.endTime }" readonly="readonly"
                                                name="endTime0"/>
                                	</c:when>
                                	<c:otherwise>
                                		Start time:<input class="timeClass" type="text" value="" readonly="readonly"
                                                  name="startTime0"/>
                                		End time:<input class="timeClass" type="text" value="" readonly="readonly"
                                                name="endTime0"/>
                                	</c:otherwise>
                                </c:choose>

							</p>
                        </div>
                        <div id="tuesdayTab">
                            <p>
                                <c:choose>
                                	<c:when test="${tuesday !=null }">
                                		Start time:<input class="timeClass" type="text" value="${tuesday.startTime }" readonly="readonly"
                                                  name="startTime1"/>
                                		End time:<input class="timeClass" type="text" value="${tuesday.endTime }" readonly="readonly"
                                                name="endTime1"/>
                                	</c:when>
                                	<c:otherwise>
                                		Start time:<input class="timeClass" type="text" value="" readonly="readonly"
                                                  name="startTime1"/>
                                		End time:<input class="timeClass" type="text" value="" readonly="readonly"
                                                name="endTime1"/>
                                	</c:otherwise>
                                </c:choose>
                            </p>
                        </div>
                        <div id="wednesdayTab">
                            <p>
                                <c:choose>
                                	<c:when test="${wednesday !=null }">
                                		Start time:<input class="timeClass" type="text" value="${wednesday.startTime }" readonly="readonly"
                                                  name="startTime2"/>
                                		End time:<input class="timeClass" type="text" value="${wednesday.endTime }" readonly="readonly"
                                                name="endTime2"/>
                                	</c:when>
                                	<c:otherwise>
                                		Start time:<input class="timeClass" type="text" value="" readonly="readonly"
                                                  name="startTime2"/>
                                		End time:<input class="timeClass" type="text" value="" readonly="readonly"
                                                name="endTime2"/>
                                	</c:otherwise>
                                </c:choose>
                            </p>
                        </div>
                        <div id="thursdayTab">
                            <p>
                                <c:choose>
                                	<c:when test="${thursday !=null }">
                                		Start time:<input class="timeClass" type="text" value="${thursday.startTime }" readonly="readonly"
                                                  name="startTime3"/>
                                		End time:<input class="timeClass" type="text" value="${thursday.endTime }" readonly="readonly"
                                                name="endTime3"/>
                                	</c:when>
                                	<c:otherwise>
                                		Start time:<input class="timeClass" type="text" value="" readonly="readonly"
                                                  name="startTime3"/>
                                		End time:<input class="timeClass" type="text" value="" readonly="readonly"
                                                name="endTime3"/>
                                	</c:otherwise>
                                </c:choose>
                            </p>
                        </div>
                        <div id="fridayTab">
                            <p>
                                <c:choose>
                                	<c:when test="${friday !=null }">
                                		Start time:<input class="timeClass" type="text" value="${friday.startTime }" readonly="readonly"
                                                  name="startTime4"/>
                                		End time:<input class="timeClass" type="text" value="${friday.endTime }" readonly="readonly"
                                                name="endTime4"/>
                                	</c:when>
                                	<c:otherwise>
                                		Start time:<input class="timeClass" type="text" value="" readonly="readonly"
                                                  name="startTime4"/>
                                		End time:<input class="timeClass" type="text" value="" readonly="readonly"
                                                name="endTime4"/>
                                	</c:otherwise>
                                </c:choose>
                            </p>
                        </div>
                        <div id="saturdayTab">
                            <p>
                                <c:choose>
                                	<c:when test="${saturday !=null }">
                                		Start time:<input class="timeClass" type="text" value="${saturday.startTime }" readonly="readonly"
                                                  name="startTime5"/>
                                		End time:<input class="timeClass" type="text" value="${saturday.endTime }" readonly="readonly"
                                                name="endTime5"/>
                                	</c:when>
                                	<c:otherwise>
                                		Start time:<input class="timeClass" type="text" value="" readonly="readonly"
                                                  name="startTime5"/>
                                		End time:<input class="timeClass" type="text" value="" readonly="readonly"
                                                name="endTime5"/>
                                	</c:otherwise>
                                </c:choose>
                            </p>
                        </div>
                        <div id="sundayTab">
                            <p>
                                <c:choose>
                                	<c:when test="${sunday !=null }">
                                		Start time:<input class="timeClass" type="text" value="${sunday.startTime }" readonly="readonly"
                                                  name="startTime6"/>
                                		End time:<input class="timeClass" type="text" value="${sunday.endTime }" readonly="readonly"
                                                name="endTime6"/>
                                	</c:when>
                                	<c:otherwise>
                                		Start time:<input class="timeClass" type="text" value="" readonly="readonly"
                                                  name="startTime6"/>
                                		End time:<input class="timeClass" type="text" value="" readonly="readonly"
                                                name="endTime6"/>
                                	</c:otherwise>
                                </c:choose>
                            </p>
                        </div>
                    </div>


                  --%>


</body>
</html>